<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Hello APICloud</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/common.css" />
	<style>
		.center{
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-box-pack:center;
			-webkit-box-align:center;
		}
	</style>
</head>
<body style='background:#EDEDED;'>
    <div id="wrap">
        <div id="main" class='center'>
                <img id='loading' src='image/loading.gif' width=65 height=65>
        </div>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    
    var launchRemoved = false;
    var loadingRemoved = false;
    
	apiready = function(){
        api.setStatusBarStyle({
            style: 'light'
        });
        api.openFrame({
            name: 'main',
            url: 'http://124.133.16.116:800/index.php',
            bounces: false,
            rect: {
                w: 'auto',
                h: 'auto'
            },
            progress:{
                type:'page'
            }
        });
		api.setFrameClient({
		    frameName:'main'
		},function(ret){
		    onBrowserStateChange(ret);
		});
		removeLogic();
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err){
            api.historyBack({
                frameName:'main'
            },function(ret,err){
                if(!ret.status){
                    api.closeWidget();
                }
            });
        });
		removeLogic();
    };

	function onBrowserStateChange(ret){
    	if(0 == ret.state){//开始加载
			if(!launchRemoved){
				launchRemoved = true;
				removeLaunch();
			}
    	}
    	if(2 == ret.state){
    		if(!loadingRemoved){
    			loadingRemoved = true;
    			document.getElementById('loading').style.display = 'none';
    		}
    	}
    }
	
	function removeLogic(){
		setTimeout(function(){
			if(!launchRemoved){
				launchRemoved = true;
				removeLaunch();
			}
		}, 3000);
	}

	function removeLaunch(){
		api.removeLaunchView({
			animation:{
				type:"fade",
				subType:"from_right",
				duration:300
			}
		});
	}
</script>
</html>
